<template>
  <div class="opinionTable">
    <div class="tools">
      <Search @clearSearch="pageRefresh" :placeholder="placeholder"></Search>
    </div>
    <div class="table">
      <el-table
        :data="data.slice((lazyPage - 1) * pageSize, lazyPage * pageSize)"
        stripe
        style="margin: 0 auto; width: 98%; font-size: 1rem"
        @sort-change="sortChange"
        @filter-change="filterTag"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item>
                <div style="font-size: 1rem; font-weight: 600; color: #909399">
                  意见图片
                </div>
                <div class="expandImg">
                  <img :src="props.row.opinion_img" />
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        >
        <el-table-column prop="opinion_id" label="ID" width="50" min-width="50">
        </el-table-column>
        <el-table-column
          prop="opinion_title"
          label="标题"
          width="200"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="opinion_describe"
          label="详细描述"
          width="230"
          min-width="230"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>{{ scope.row.opinion_describe }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">
                  <span v-if="scope.row.opinion_describe == null">无</span>
                  <span v-else
                    >{{ scope.row.opinion_describe.slice(0, 8) }}
                  </span></el-tag
                >
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="opinion_tel"
          label="联系电话"
          width="150"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="opinion_status"
          label="处理状态"
          width="120"
          min-width="120"
          :filters="[
            { text: '未处理', value: false },
            { text: '已处理', value: true },
          ]"
          :filter-multiple="false"
          filter-placement="bottom-end"
          :column-key="'type'"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.opinion_status === true ? 'success' : 'danger'"
              disable-transitions
            >
              <template
                ><span v-if="!scope.row.opinion_status"> 未处理</span>
                <span v-else>已处理</span>
              </template>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="opinion_date"
          label="日期"
          width="280"
          min-width="280"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180" min-width="180">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.opinion_status"
              size="mini"
              @click="handle(scope.$index, scope.row)"
            >
              处理
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="Delete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { PageHeight } from "../utils/PageHeight";
import Search from "../components/Search.vue";
import Qs from "qs";
export default {
  name: "OpinionTable",
  components: {
    Search,
  },
  data() {
    return {
      placeholder: "请输入意见ID",
      pageSize: 3,
      data: [
        {
          opinion_id: 1,
          opinion_title: "",
          opinion_img: "",
          opinion_describe: "",
          opinion_tel: "",
          opinion_status: false,
          opinion_date: "",
        },
      ],
      currentPage_old: 1,
      currentPage: 1,
      total: 0,
    };
  },

  mounted() {
    const height = window.innerHeight;
    this.pageSize = PageHeight(height);
    this.getOpinionList();
  },
  computed: {
    lazyPage: function () {
      if (this.currentPage < 4) {
        return this.currentPage;
      } else {
        return this.currentPage % 3 === 0 ? 3 : this.currentPage % 3;
      }
    },
  },
  methods: {
    //获取意见列表
    getOpinionList() {
      this.axios
        .get("/opinion/getOpinion", {
          params: {
            page: 1,
            count: this.pageSize * 3,
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.data = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取意见列表失败");
        });
    },
    //刷新页面
    pageRefresh() {
      this.$emit("refresh");
    },
    //处理意见
    handle(index, row) {
      this.$confirm("请确认该意见是否已处理?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const data = {
            opinionId: row.opinion_id,
            status: true,
          };
          this.axios
            .post("/opinion/changeOpinionStatus", Qs.stringify(data))
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.pageRefresh();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("处理意见失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消处理",
          });
        });
    },
    //删除意见
    Delete(index, row) {
      this.$confirm("此操作将删除该意见, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const opinionId = row.opinion_id;
          this.axios
            .post(
              "/opinion/deleteOpinion",
              Qs.stringify({
                opinionId,
              })
            )
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.pageRefresh();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("删除意见失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //根据ID搜索
    searchOpinion(val) {
      this.axios
        .get("/opinion/searchOpinion", {
          params: {
            opinionId: val,
          },
        })
        .then((res) => {
          this.data = [];
          this.data.push(res.data.data);
          this.$message({
            message: "搜索成功",
            type: "success",
          });
        })
        .catch((err) => {
          this.$message.error("搜索意见失败");
          console.error(err);
        });
    },
    //筛选处理/未处理
    filterTag(val) {
      const status = val.type[0];
      if (status === false) {
        this.axios
          .get("/opinion/OpinionStatus", {
            params: {
              page: 1,
              count: this.pageSize * 3,
              status: false,
            },
          })
          .then((res) => {
            if (res.data.code === "200") {
              this.data = res.data.data.list;
              this.total = res.data.data.total;
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.error(err);
            this.$message.error("筛选意见列表-未处理失败");
          });
      } else if (status === true) {
        this.axios
          .get("/opinion/OpinionStatus", {
            params: {
              page: 1,
              count: 30,
              status: true,
            },
          })
          .then((res) => {
            if (res.data.code === "200") {
              this.data = res.data.data.list;
              this.total = res.data.data.total;
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.error(err);
            this.$message.error("筛选意见列表-已处理失败");
          });
      } else {
        this.pageRefresh();
      }
    },
    //日期排序
    sortChange(e) {
      const sort = e.order;
      if (sort === "ascending") {
        this.axios
          .get("/opinion/OpinionByAsc")
          .then((res) => {
            if (res.data.code === "200") {
              this.data = res.data.data.list;
              this.$message({
                message: "获取意见正序列表成功",
                type: "success",
              });
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.error(err);
            this.$message.error("获取意见正序列表失败");
          });
      } else if (sort === "descending") {
        this.axios
          .get("/opinion/OpinionByDesc")
          .then((res) => {
            if (res.data.code === "200") {
              this.data = res.data.data.list;
              this.$message({
                message: "获取意见倒序列表成功",
                type: "success",
              });
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.error(err);
            this.$message.error("获取意见倒序列表失败");
          });
      } else {
        this.pageRefresh();
      }
    },
    //分页函数
    handleCurrentChange(val) {
      this.currentPage = val;
      if (Math.ceil(this.currentPage_old / 3) !== Math.ceil(val / 3)) {
        this.currentPage_old = val;
        this.pageLoad("/opinion/getOpinion", val, 3, this.pageSize * 3)
          .then((res) => {
            this.data = res.data.data.list;
          })
          .catch((err) => {
            console.error(err);
            this.$message.error(`获取获取意见列表-第${val}页失败`);
          });
      }
    },
  },
  watch: {
    $route: {
      handler(val) {
        const opinionId = val.query.search;
        if (opinionId !== undefined) {
          this.searchOpinion(opinionId);
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.tools {
  position: relative;
  width: 100%;
  height: 40px;
}
.table {
  margin-top: 15px;
  width: 100%;
  height: 65vh;
}
.pagination {
  float: right;
  width: 50%;
  height: 5vh;
}
.table /deep/.el-table th > .cell {
  text-align: center;
}

.table /deep/.el-table .cell {
  text-align: center;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #83b7eb;
  border-radius: 5px;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-track-piece {
  background-color: #e6e6e6;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #2979c9;
}

.table /deep/ .el-table__fixed,
.table /deep/ .el-table__fixed-right {
  height: calc(100% - 7px) !important;
  box-shadow: -5px -2px 10px rgba(0, 0, 0, 0.12) !important;
}
.table /deep/ .el-table__fixed-body-wrapper {
  height: calc(100% - 36px) !important;
}

.table
  /deep/
  .el-table__body-wrapper.is-scrolling-none
  ~ .el-table__fixed-right {
  height: 100% !important;
  bottom: 0 !important;
  box-shadow: none !important;
}
.table /deep/ .row-expand-cover .el-table__expand-icon {
  visibility: hidden;
}
.table /deep/ .el-tag {
  font-size: 1rem;
}
.demo-table-expand {
  margin: 0 auto;
  width: 60%;
  text-align: center;
}
.demo-table-expand /deep/ .el-form-item__label {
  width: 120px;
  color: #332f2f;
  font-size: 1rem;
  font-weight: 600;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
.demo-table-expand span {
  font-size: 1rem;
}
.expandImg {
  margin: 0 auto;
  width: 60%;
}
.expandImg img {
  width: 80%;
}
</style>